import React, { useState, useEffect } from 'react'
import Retreat from './Retreat'
export default function Plus() {

  const [meal, setMeal] = useState([
    { title: '连续包月', price: '18', shou: '9' },
    { title: '连续包年', price: '198' },
    { title: '终生会员', price: '2598' },
  ])
  const [index, setIndex] = useState(0)
  const [stat, setStat] = useState(true)

  const dy = () => {
    if (index == 0) {
      return '开始订阅-￥9'
    } else if (index == 1) {
      return '开始订阅-￥198/年'
    } else if (index == 2) {
      return '开通终生会员-￥2598'
    }
  }
  return (


    <div className='box'>
      <Retreat title='潮汐Plus' />
      <div style={{
        padding: '1.5rem',
        backgroundColor: '#292B37',
        borderRadius: '1rem',
        margin: '2.5rem 0'
      }}>
        <img src='/public/plus.png' style={{
          borderRadius: '50%',
          width: '4rem',
          height: '4rem'
        }} />
        <h2 style={{
          color: 'white',
          margin: '1rem 0'
        }}>Strive</h2>
        <p>暂未开通潮汐Plus</p>
      </div>

      <div>
        <h2 style={{
          margin: '1rem 0'
        }}>会员套餐</h2>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between'
        }}>
          <div style={{
            width: '28%',
            height: '6rem',
            display: 'inline-block',
            backgroundColor: '#F5F5F5',
            border: index == 0 ? '2px solid #C8A969' : '',
            borderRadius: '1rem',
            padding: '1rem',
            textAlign: 'center'
          }} onClick={() => {
            setIndex(0)
          }}>
            <p>连续包月</p>
            <p style={{
              fontWeight: '600',
              color: 'red',
              fontSize: '1.2rem'
            }}>&yen;18</p>
          </div>
          <div style={{
            width: '28%',
            height: '6rem',
            display: 'inline-block',
            backgroundColor: '#F5F5F5',
            border: index == 1 ? '2px solid #C8A969' : '',
            borderRadius: '1rem',
            padding: '1rem',
            textAlign: 'center'
          }} onClick={() => {
            setIndex(1)
          }}>
            <p>连续包年</p>
            <p style={{
              fontWeight: '600',
              color: 'red',
              fontSize: '1.2rem'
            }}>&yen;198</p>
            <p>&yen;17.00/月</p>
          </div>
          <div style={{
            width: '28%',
            height: '6rem',
            display: 'inline-block',
            backgroundColor: '#F5F5F5',
            border: index == 2 ? '2px solid #C8A969' : '',
            borderRadius: '1rem',
            padding: '1rem',
            textAlign: 'center'
          }} onClick={() => {
            setIndex(2)
          }}>
            <p>连续包月</p>
            <p style={{
              fontWeight: '600',
              color: 'red',
              fontSize: '1.2rem'
            }}>&yen;2598</p>
            <p>永久有效</p>
          </div>
        </div>

        <button style={{
          width: '100%',
          height: '3rem',
          borderRadius: '1rem',
          margin: "1rem 0",
          backgroundColor: '#C8A969',
          color: 'white',
          border: 'none',
          fontSize: '1rem'
        }}>{dy()}</button>
        <p style={{
          display: index == 0 ? '' : 'none',
          color: '#f80'
        }}>第二个月起&yen;187，可随时取消</p>
      </div>






    </div>
  )
}
